<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" xmlns:th="http://www.thymeleaf.org">
    <title>主页</title>

    <script type="text/javascript" src="/js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="/js/vue.js"></script>
</head>
<body>
<div id="myApp">
    <h4>欢迎进入xxx系统</h4>
<hr/>
    <!--<a href="javascript:openUrl('/userPage/addUser')">新增用户</a>-->
    <a href="http://localhost:8080/userPage/addUser">新增用户</a>
    <div>
        <table>
            <thead>
            <tr>
                <th>ID</th>
                <th>用户名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>住址</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="x in users">
                <td>{{x.userId}}</td>
                <td>{{x.userName}}</td>
                <td>{{x.sex}}</td>
                <td>{{x.age}}</td>
                <td>{{x.address}}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
<script>
    //打开页面
    function openUrl(url) {
        $("iframe").attr("src", url);
    }
</script>
<script>
    new Vue({
        el: "#myApp",
        data: {
            user: {
                userPwd: null,
                email: null,
            },
            users: null
        },
        methods: {
            // 页面加载
            loadData: function () {
                var self = this;
                $.ajax({
                    // 请求地址
                    url: "/user/list",
                    type: "post",
                    // post提交方式需要指定请求体类型
                    contentType: "application/x-www-form-urlencoded",
                    // 传入的数据
                    //data: self.user,
                    // 返回的数据类型
                    dataType: "json",
                    // 返回的数据
                    success: function (data) {
                        console.log(data);
                        self.users = data.users;
                    }
                })
            },
            add: function () {

            }
        },
        mounted() {
            // 运行loadData函数
            this.loadData();
        }
    })
</script>
</html>
